<template>
  <a-card class="body-container">
    <a-row style="height: 100%">
      <a-col :span="4" style="height: 100%">
        <a-card
          title="应用列表"
          :body-style="{ height: 'calc( 100% - 50px )', padding: '5px' }"
          style="margin-right: 10px; height: 100%"
          size="small"
        >
          <s-scroll style="height: 100%">
            <a-tree
              :selected-keys="appSelectKeys"
              :checkable="false"
              class="server"
              :tree-data="apps"
              :field-names="{
                children: 'children',
                title: 'name',
                key: 'code'
              }"
              block-node
              @select="
                (selectedKeys) => {
                  appSelectKeys = selectedKeys
                }
              "
            >
              <template #title="{ dataRef }"> {{ dataRef.name }} </template>
            </a-tree>
          </s-scroll>
        </a-card>
      </a-col>
      <a-col
        v-if="appSelectKeys != null"
        :span="20"
        style="height: 100%; display: flex; flex-direction: column"
      >
        <s-tool-bar>
          <template #left>
            <s-button
              v-if="authorize.insert"
              type="primary"
              icon="plus-outlined"
              @click="
                $refs.add.init((dialog) => {
                  ;(itemFormValue = { app: appSelectKeys[0] }), dialog.open()
                })
              "
              >新增</s-button
            >
          </template>
          <template #right>
            <s-button
              type="dashed"
              shape="circle"
              icon="redo-outlined"
              @click="$refs.table.refresh()"
            />
          </template>
        </s-tool-bar>
        <s-tree-table
          ref="table"
          bordered
          :scroll="{
            y: tableHeight
          }"
          :columns="columns"
          :url="'/menu/item/list?app=' + appSelectKeys[0]"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'action'">
              <a
                v-if="authorize.insert"
                style="margin-right: 8px"
                @click="
                  $refs.add.init((dialog) => {
                    ;(itemFormValue = { parentId: record.id, app: appSelectKeys[0] }), dialog.open()
                  })
                "
              >
                <s-icon type="plus-outlined" />新增
              </a>
              <a
                v-if="authorize.selectOneById"
                style="margin-right: 8px"
                @click="detail(record.id, $refs.detail)"
              >
                <s-icon type="eye-outlined" />查看
              </a>
              <a
                v-if="authorize.update"
                style="margin-right: 8px"
                @click="detail(record.id, $refs.update)"
              >
                <s-icon type="edit-outlined" />编辑
              </a>
              <a-popconfirm
                v-if="authorize.delete"
                title="确认删除此条数据？"
                ok-text="是"
                cancel-text="否"
                @confirm="deleteById(record.id)"
              >
                <a style="margin-right: 8px"> <s-icon type="delete-outlined" />删除 </a>
              </a-popconfirm>
            </template>
            <template v-if="column.key === 'icon'">
              <s-icon :type="record.icon" />
            </template>
          </template>
        </s-tree-table>
        <!--    <detail ref="detail" />
        <add
          ref="add"
          @success="
            () => {
              $refs.table.refresh()
            }
          "
        />
        <update
          ref="update"
          @success="
            () => {
              $refs.table.refresh()
            }
          "
        />-->
        <s-dynamic-form-dialog
          ref="add"
          v-model="itemFormValue"
          title="添加"
          form-id="b8770ac683cf40ba8597fa33901f55d9"
          @save="addItem"
        >
          <template #item="{ properties }">
            <template v-if="properties.key == 'app'">
              <s-form-item label="父菜单" size="middle" name="parentId">
                <s-select-tree
                  v-model="itemFormValue.parentId"
                  :allow-clear="true"
                  placeholder="父菜单"
                  :check-children="true"
                  :url="'/menu/item/list?app=' + appSelectKeys[0]"
                  label-field="title"
                  value-field="id"
                  key-field="id"
                  parent-key-field="parentId"
                />
              </s-form-item>
            </template>
          </template>
          <s-form-item label="角色列表" name="roleList">
            <s-tree
              ref="roleList"
              v-model="itemFormValue.roleList"
              height="200px"
              url="/authority/role/selectList"
              value-field="id"
              placeholder="角色列表"
            />
          </s-form-item>
          <s-form-item label="权限列表" name="permissionList">
            <s-tree
              ref="permissionList"
              v-model="itemFormValue.permissionList"
              height="200px"
              url="/authority/permission/selectList"
              value-field="id"
              placeholder="权限列表"
            />
          </s-form-item>
          <s-form-item
            label="备注"
            name="remark"
            size="big"
            :rules="[{ max: 200, message: '最长为200' }]"
          >
            <s-text-area v-model="itemFormValue.remark" allow-clear placeholder="备注" />
          </s-form-item>
        </s-dynamic-form-dialog>
        <s-dynamic-form-dialog
          ref="detail"
          v-model="itemFormValue"
          disabled
          form-id="b8770ac683cf40ba8597fa33901f55d9"
        >
          <template #item="{ properties }">
            <template v-if="properties.key == 'app'">
              <s-form-item label="父菜单" size="middle" name="parentId">
                <s-select-tree
                  v-model="itemFormValue.parentId"
                  :allow-clear="true"
                  placeholder="父菜单"
                  :check-children="true"
                  :url="'/menu/item/list?app=' + appSelectKeys[0]"
                  label-field="title"
                  value-field="id"
                  key-field="id"
                  parent-key-field="parentId"
                />
              </s-form-item>
            </template>
          </template>
          <s-form-item label="角色列表" name="roleList">
            <s-tree
              ref="roleList"
              v-model="itemFormValue.roleList"
              disabled
              height="200px"
              url="/authority/role/selectList"
              value-field="id"
              placeholder="角色列表"
            />
          </s-form-item>
          <s-form-item label="权限列表" name="permissionList">
            <s-tree
              ref="permissionList"
              v-model="itemFormValue.permissionList"
              disabled
              height="200px"
              url="/authority/permission/selectList"
              value-field="id"
              placeholder="权限列表"
            />
          </s-form-item>
          <s-form-item
            label="备注"
            name="remark"
            size="big"
            :rules="[{ max: 200, message: '最长为200' }]"
          >
            <s-text-area v-model="itemFormValue.remark" disabled allow-clear placeholder="备注" />
          </s-form-item>
          <s-form-item label="创建人">
            <s-input v-model="itemFormValue.createByAccount" disabled />
          </s-form-item>
          <s-form-item label="创建时间">
            <s-input v-model="itemFormValue.createDate" disabled />
          </s-form-item>
          <s-form-item label="修改人">
            <s-input v-model="itemFormValue.updateByAccount" disabled />
          </s-form-item>
          <s-form-item label="修改时间">
            <s-input v-model="itemFormValue.updateDate" disabled />
          </s-form-item>
        </s-dynamic-form-dialog>
        <s-dynamic-form-dialog
          ref="update"
          v-model="itemFormValue"
          title="编辑"
          form-id="b8770ac683cf40ba8597fa33901f55d9"
          @save="updateItem"
        >
          <template #item="{ properties }">
            <template v-if="properties.key == 'app'">
              <s-form-item label="父菜单" size="middle" name="parentId">
                <s-select-tree
                  v-model="itemFormValue.parentId"
                  :allow-clear="true"
                  placeholder="父菜单"
                  :check-children="true"
                  :url="'/menu/item/list?app=' + appSelectKeys[0]"
                  label-field="title"
                  value-field="id"
                  key-field="id"
                  parent-key-field="parentId"
                />
              </s-form-item>
            </template>
          </template>
          <s-form-item label="角色列表" name="roleList">
            <s-tree
              ref="roleList"
              v-model="itemFormValue.roleList"
              height="200px"
              url="/authority/role/selectList"
              value-field="id"
              placeholder="角色列表"
            />
          </s-form-item>
          <s-form-item label="权限列表" name="permissionList">
            <s-tree
              ref="permissionList"
              v-model="itemFormValue.permissionList"
              height="200px"
              url="/authority/permission/selectList"
              value-field="id"
              placeholder="权限列表"
            />
          </s-form-item>
          <s-form-item
            label="备注"
            name="remark"
            size="big"
            :rules="[{ max: 200, message: '最长为200' }]"
          >
            <s-text-area v-model="itemFormValue.remark" allow-clear placeholder="备注" />
          </s-form-item>
        </s-dynamic-form-dialog>
      </a-col>
    </a-row>
  </a-card>
</template>

<script>
const columns = [
  {
    title: '名称',
    dataIndex: 'title',
    width: 200,
    ellipsis: true
  },
  {
    title: '组件',
    dataIndex: 'component',
    width: 300,
    ellipsis: true
  },
  {
    title: '路径',
    dataIndex: 'path',
    width: 300,
    ellipsis: true
  },
  {
    title: '图标',
    dataIndex: 'icon',
    width: 150,
    key: 'icon'
  },
  {
    title: '排序号',
    dataIndex: 'orderNum',
    width: 100,
    ellipsis: true
  },
  {
    title: '创建人',
    dataIndex: 'createByAccount',
    ellipsis: true,
    width: 200
  },
  {
    title: '创建时间',
    dataIndex: 'createDate',
    ellipsis: true,
    width: 200
  },
  {
    title: '修改人',
    dataIndex: 'updateByAccount',
    ellipsis: true,
    width: 200
  },
  {
    title: '修改时间',
    dataIndex: 'updateDate',
    ellipsis: true,
    width: 200
  },
  {
    title: '操作',
    fixed: 'right',
    width: 250,
    key: 'action'
  }
]
import { findInTree } from '@/utils/tree'
// import Detail from './detail/index.vue'
// import Add from './add/index.vue'
// import Update from './update/index.vue'
export default {
  name: 'QueryList',
  // components: { Detail, Add, Update },
  data() {
    return {
      query: {},
      columns: columns,
      itemFormValue: { app: null },
      apps: [],
      appSelectKeys: null
    }
  },
  authorize: '/menu/item/permissionList',
  created() {
    this.$api.GET('/realm/app/allList').then((res) => {
      if (res.data) {
        res.data.forEach((item) => {
          this.apps.push(item)
        })
        this.appSelectKeys = [res.data[0].code]
        this.$nextTick(() => {
          this.$calcTableHeight()
        })
      }
    })
  },
  methods: {
    formatValue(val, treeData) {
      const p = []
      if (val && val.length > 0) {
        val.forEach((item) => {
          const tmp = findInTree(treeData, 'id', item)
          p.push({ name: tmp.value, value: tmp.id })
        })
      }
      return p
    },
    formatSelect(val) {
      const p = []
      if (val && val.length > 0) {
        val.forEach((item) => {
          p.push(item.value)
        })
      }
      return p
    },
    addItem(values, fullValue, dialog) {
      values.permissionList = this.formatValue(
        values.permissionList,
        this.$refs.permissionList.getTreeData()
      )
      values.roleList = this.formatValue(values.roleList, this.$refs.roleList.getTreeData())
      this.$api
        .PUT('/menu/item/insert', values)
        .then((res) => {
          dialog.close()
          this.$refs.table.refresh()
          this.$message.info(res.msg)
        })
        .catch(() => {
          dialog.reset()
        })
    },
    updateItem(values, fullValue, dialog) {
      values.id = fullValue.id
      values.permissionList = this.formatValue(
        values.permissionList,
        this.$refs.permissionList.getTreeData()
      )
      values.roleList = this.formatValue(values.roleList, this.$refs.roleList.getTreeData())
      this.$api
        .PUT('/menu/item/update', values)
        .then((res) => {
          dialog.close()
          this.$refs.table.refresh()
          this.$message.info(res.msg)
        })
        .catch(() => {
          dialog.reset()
        })
    },
    detail(id, ref) {
      const that = this
      ref.init((dialog) => {
        that.$loading(true)
        that.$api
          .GET('/menu/item/selectOneById', { id: id })
          .then((res) => {
            that.$loading(false)
            if (!res.data) {
              that.$message.warn('数据不存在')
            } else {
              res.data.roleList = this.formatSelect(res.data.roleList)
              res.data.permissionList = this.formatSelect(res.data.permissionList)
              that.itemFormValue = res.data
              dialog.open()
            }
          })
          .catch(() => {
            that.$loading(false)
          })
      })
    },
    deleteById(id) {
      this.$loading(true)
      this.$api
        .DELETE('/menu/item/delete', { id: id })
        .then(() => {
          this.$loading(false)
          this.$refs.table.refresh()
        })
        .catch(() => {
          this.$loading(false)
        })
    }
  }
}
</script>
